<html class="no-js" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<body th:fragment="body">
	<link rel="stylesheet" type="text/css" media="screen" th:href="@{/js/tTestToolsBusinessFlow/bootstrap.min.css}" />
	<link rel="stylesheet" type="text/css" media="screen" th:href="@{/js/tTestToolsBusinessFlow/jquery-ui.custom.min.css}" />
	<link rel="stylesheet" type="text/css" media="screen" th:href="@{/library/tipso/tipso.min.css}" />
	<link rel="stylesheet" type="text/css" media="screen" th:href="@{/library/select2/css/select2.min.css}" />

	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/jquery-2.1.4.min.js}"></script>
	<script type="text/javascript" th:src="@{/library/select2/js/select2.full.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/jquery-ui.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/jsPlumb-2.2.8.js}"></script>
	<script type="text/javascript" th:src="@{/library/tipso/tipso.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/tool.js}"></script>
    <script type="text/javascript" th:src="@{/js/commons.js}"></script>
        
	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/metadata.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsBusinessFlow/tTestToolsBusinessFlow.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsInterface/tTestToolsInterface.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsNode/tTestToolsNode.js}"></script>
	<script type="text/javascript" th:src="@{/js/tTestToolsCase/tTestToolsCase.js}"></script>

	<style type="text/css">
	.am-pre-scrollable{
		max-height: 50rem;
    	overflow-y: scroll;
	}
.closethick {
	position: absolute;
}

.jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel {
	cursor: pointer;
}

.startNode {
	width: 200px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	color: white;
	border-radius: 50%;
	background-color: #00FFFF;
	z-index: 0;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.circle {
	width: 70px;
	height: 50px;
	color: white;
	border-radius: 50%;
	z-index: 1;
	line-height: 50px;
	text-align: center;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.model {
	border: 1px solid #ddd;
	border-radius: 5px;
	margin-bottom: 0;
	min-width: 160px;
}

.case_list {
	width: 100%;
	padding: 10px;
}

.node {
	height: 40px;
	width: 150px;
	background-color: #438eb9;
	border-radius: 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 40px;
	margin: 10px;
	position: absolute;
}

#tool_section li {
	height: 40px;
	width: 150px;
	background-color: #438eb9;
	border-radius: 5px;
	font-size: 12px;
	color: #fff;
	text-align: center;
	list-style-type: none;
	vertical-align: middle;
	line-height: 40px;
	z-index: 1;
	cursor: pointer;
	margin: 10px;
}

#container {
	min-height: 1000px;
	position: relative;
	border: 1px solid #666666;
	background-color: #ffffff;
	border-radius: 5px;
	z-index: 0;
	overflow: auto;
}

	.exec{
		border: 10px #0000FF solid;
		height: 60px;
    	width: 170px;
	}
</style>
	<nav>
		<nav class="am-g">
			<input type="hidden" id="businessFlowId" name="businessFlowId" th:value="${param.businessFlowId[0]}" placeholder="" readonly="readonly" />
			<nav class="am-u-lg-9">
				<h4 id="title"></h4>
			</nav>
			<nav class="am-u-lg-1">
				<input type="button" class="am-btn am-btn-secondary btn-loading-example" onclick="exec('start')" value="执行" />
			</nav>
			<nav class="am-u-lg-1">
			</nav>
			<nav class="am-u-lg-1">&nbsp;</nav>
		</nav>
	</nav>
	<hr />
	<nav class="am-g">
		<nav class="am-u-lg-3 am-panel am-panel-default">
			<nav style="margin-top: 20px">
				<select id="search" placeholder="案例搜索" style="width: 100%" tabindex="-1">
					<option selected="selected">搜索案例</option>
				</select>
			</nav>
			<hr />
			<nav>
				<nav style="margin-left: 20px;" id="tool">
					<table style="width: 100%">
						<tr>
							<td align="center"><nav id="error_end" data-tipso="失败结束" class="circle" style="background-color: red;">end</nav></td>
							<td><nav id="success_end" data-tipso="成功结束" class="circle" style="background-color: #00FF00;">end</nav></td>
						</tr>
					</table>
				</nav>
				<section id="tool_section" class="am-accordion am-accordion-gapped">
				</section>
			</nav>
		</nav>

		<nav class="am-u-lg-9 ">
			<nav id="container"></nav>
			<nav class="am-panel am-panel-default" style="">
		       <nav class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-3'}">执行日志<span class="am-icon-chevron-down am-fr"></span></nav>
		       <nav class="am-panel-bd am-cf am-collapse am-in" id="collapse-panel-3" style="">
		         <pre id="log" class="am-pre-scrollable"></pre>
		       </nav>
		     </nav>
		</nav>
	</nav>

	
</body>
</html>